<template>
  <div class="home">
    <div class="home-header-cntainer">
      <div>admin</div>
      <div>logout</div>
      <div>
        <img src="../assets/cart.png" alt="" @click="tocart">
      </div>
    </div>
    <div class="home-content">
        <div class="home-sotr-container">
          <div class="sotr-by">Sort by</div>
          <div class="sort-default">Default</div>
          <div class="sotr-price">
            <div @click="onSotr">Price</div>
            <div v-show="!imgshow">
              <img src="../assets/down.png" alt="">
            </div>
            <div v-show="imgshow">
              <img src="../assets/up.png" alt="">
            </div>
          </div>
        </div>
        <div class="home-content-wrapper">
          <!-- 左侧内容 -->
          <div class="home-slider">
              <h4>PRICE:</h4>
              <div v-for="(item,index) in sliderlist "
              :key="index"
              :class="current===index?'slider-left-item-active':'slider-left-item'"
              @click="changecurrent(index,item)"
              >
                {{item.title}}
              </div>
          </div>
          <!-- 右侧商品列表 -->
          <div class="home-right">
            <el-row :gutter="10">
              <el-col 
              :xs="24" 
              :sm="8" 
              :md="8" 
              :lg="6" 
              :xl="6"
              v-for="(item,index) in storeshow "
              :key="index"
              >
                <div class="home-right-item">
                  <div class="store-item-img"
                  @click="Click"
                  >
                    <img :src=item.productImage alt="" >
                  </div>
                  <div class="store-right">
                    <div class="store-item-name">{{item.productName}}</div>
                    <div class="store-item-price">{{item.salePrice}}</div>
                    <div class="store-item-tocart" @click="onClick(item)">加入购物车</div>
                  </div>
                </div>
                <!-- 窗口768内容 -->
                <div class="show-right-item">
                  <div class="show-item-img">
                    <img :src=item.productImage alt="" >
                  </div>
                  <div class="show-right">
                    <div class="show-item-name">{{item.productName}}</div>
                    <div class="show-item-price-wrapper">
                      <div class="5show-item-price">{{item.salePrice}}</div>
                      <div clas s="show-item-tocart">加入购物车</div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
    </div>
    <div class="loading-container" v-show="loading">
      <img src="../assets/123.gif" alt="">
    </div>
  </div>
</template>

<script>
import '../css/home.css'
import Axios from 'axios'
export default {
    data(){
      return{
        sliderlist:[],
        storelist:[],
        storeshow:[],
        current:0,
        imgshow:false,
        sortadd:1,
        loading:false,
        bool:false
      }
    },
    methods:{
      // 点击切换内容
      changecurrent(index,item){
        // console.log(item)
        this.current=index
        let temp=[]
        if(item.title=="ALL"){
          temp=this.storelist
        }else{
          this.storelist.forEach((ele)=>{
            if(ele.salePrice<=item.hight && ele.salePrice>item.low){
              temp.push(ele)
            } 
          })
        }
        this.storeshow=temp
      },
      //排序
      onSotr(){
        this.sortadd++;
        if(this.sortadd>2){
          this.sortadd=1;
        }

        if(this.sortadd===1){
          this.imgshow=!this.imgshow
          var low=function(a,b){
            return a.salePrice-b.salePrice
          }
          this.storeshow=this.storeshow.sort(low)
        }else if(this.sortadd===2){
          this.imgshow=!this.imgshow
          var hight=function(a,b){
            return b.salePrice-a.salePrice
          }
          this.storeshow=this.storeshow.sort(hight)
        }
      },
      tocart(){
        this.$router.push("Cart")
      },
      onClick(item){
        this.$store.dispatch("getcartlist",item)
      },
      Click(item){
        this.$router.push({
            name:"About",
            params:{
              item:item
            }
        })
      }
    },

    mounted(){
      Axios.get("http://localhost:8080/data.json").then((resp)=>{
        // window.console.log(resp.data.result)
        this.sliderlist=resp.data.result.slider;
        this.storelist=resp.data.result.list
        this.storeshow=resp.data.result.list
        // window.console.log(this.storelist)
        // window.console.log(this.sliderlist)
      }).catch((error)=>{
        window.console.log(error)
      }),
      window.addEventListener("scroll",()=>{
        // 获取文档高度
        var docHeight=document.documentElement.scrollHeight
        // 获取可视区域高度
        var cilHeight=document.documentElement.clientHeight
        // 获取滚动距离
        var scroffset=document.documentElement.scrollTop
        var btn=docHeight-scroffset-cilHeight
        // console.log(btn)
        if(btn<=0){
          this.loading=true;
            if(this.bool==true){
              // window.console.log(this.bool)
              window.setTimeout(()=>{
                  Axios.get("http://localhost:8080/data3.json").then((resp)=>{
                    
                    this.storelist=[...this.storelist,...resp.data.result.list]
                    this.storeshow=[...this.storelist]
                    // window.console.log(this.storelist)
                    // window.console.log(this.storeshow)
                    this.bool=null;
                    this.loading=false;
                    // window.console.log("+++",this.storeshow)
                    // return 
                  }).catch((error)=>{
                    window.console.log(error)
                  })
              },3000)
            }else if(this.bool==false){
              this.loading=true;
              // window.console.log(this.bool)
              window.setTimeout(()=>{
                  Axios.get("http://localhost:8080/data2.json").then((resp)=>{
                    // window.console.log(resp)
                    this.storelist=[...this.storelist,...resp.data.result.list]
                    this.storeshow=[...this.storelist]
                    this.bool=true;
                    this.loading=false;
                    // window.console.log("+++",this.storeshow)
                    // return
                  }).catch((error)=>{
                    window.console.log(error)
                  })
              },3000)
            }else{
              window.setTimeout(()=>{
                alert("暂无更多数据")
                this.loading=false;
                return
              },3000)
            }
        }
      })
    }

}
</script>
